import styled from "styled-components";

export const LoginWayTwoWrap = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  .login-left-box {
    width: 300px;
    border-right: 1px dotted #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .login-left-img {
      background-image: url(${require("@/assets/img/platform.png").default});
      width: 203px;
      height: 120px;
    }
    .phone-login {
      width: 251px;
      height: 31px;
      line-height: 31px;
      text-align: center;
      margin-top: 10px;
      background-image: url(${require("@/assets/img/sprite_button.png")
        .default});
      background-position: 0 -387px;
      color: #fff;
      :hover {
        background-position: 0 -469px;
        cursor: pointer;
      }
    }
    .register {
      width: 251px;
      height: 31px;
      line-height: 31px;
      text-align: center;
      margin-top: 10px;
      background-image: url(${require("@/assets/img/sprite_button.png")
        .default});
      background-position: 0 -141px;
      :hover {
        cursor: pointer;
      }
    }
  }
  .login-box-right {
    ul {
      padding: 3px 0 3px 39px;
      margin-top: -15px;
      li {
        height: 39px;
        margin: 0 auto;
        margin-top: 15px;
        a {
          display: inline-block;
          line-height: 39px;
          font-size: 12px;
        }
        i {
          width: 38px;
          float: left;
          height: 38px;
          background: url(${require("@/assets/img/logo.png").default});
          display: block;
          margin-right: 14px;
          :hover {
            cursor: pointer;
          }
        }
        .wx-login {
          background-position: -150px -670px;
        }
        .qq-login {
          background-position: -190px -670px;
        }
        .wb-login {
          background-position: -231px -670px;
        }
        .wymail-login {
          background-position: -271px -670px;
        }
      }
    }
  }
  .gx-check-box {
    position: absolute;
    left: 20px;
    bottom: 10px;
    .label-text {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.4);
    }
    a {
      font-size: 12px;
    }
  }
  .qdcord-pic {
    width: 52px;
    height: 52px;
    background-image: url(${require("@/assets/img/qr_login_icon.png").default});
    background-size: 52px 52px;
    position: absolute;
    right: 5px;
    bottom: -17px;
    :hover {
      cursor: pointer;
    }
  }
`;
